<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/15
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>


<%--新增的form表单--%>

<div id="addGustForm">
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">员工名字</label>
            <div class="layui-input-block">
                <input type="text" name="sname" required placeholder="请输入员工的名字" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="rzdate" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
        </div>


<%--        <div class="layui-form-item">--%>
<%--            <label class="layui-form-label">入职时间</label>--%>
<%--            <div class="layui-input-block">--%>
<%--                <input type="text" name="rzdate" required placeholder="请输入职的时间" autocomplete="off" class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>




        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" required placeholder="请输入员工的家庭住址" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" required placeholder="请输入员工的状态" autocomplete="off" class="layui-input">
            </div>
        </div>




        <div class="layui-form-item">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-inline">
                <select id="juesesel" name="jueseid">

                </select>
            </div>
        </div>



        <%--form表单的下拉框
       --%>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select id="bumensel" name="deptid">

                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <input type="hidden" name="imgpath" id="img" >
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" src="" style="width: 100px;height: 80px">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn" id="tess">上传图片</button>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>


<!--修改的form表单-->


<div id="updGustForm">
    <form class="layui-form" action=""  lay-filter="modify">

        <div class="layui-form-item">
            <label class="layui-form-label">员工名字</label>
            <div class="layui-input-block">
                <input type="text" name="sname" required placeholder="请输入员工的名字" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="rzdate" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
        </div>


        <%--        <div class="layui-form-item">--%>
        <%--            <label class="layui-form-label">入职时间</label>--%>
        <%--            <div class="layui-input-block">--%>
        <%--                <input type="text" name="rzdate" required placeholder="请输入职的时间" autocomplete="off" class="layui-input">--%>
        <%--            </div>--%>
        <%--        </div>--%>




        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" required placeholder="请输入员工的家庭住址" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" required placeholder="请输入员工的状态" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">员工头像</label>
            <div class="layui-input-block">
                <input type="text" name="imgpath" required placeholder="员工的头像" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-inline">
                <select id="juesesel1" name="jueseid">

                </select>
            </div>
        </div>



        <%--form表单的下拉框
       --%>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select id="bumensel1" name="deptid">

                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>








<table class="layui-hide" id="demo" lay-filter="test"></table>







<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script src="//res.layui.com/layui/dist/layui.js?t=1605019607598"></script>



<script>




    layui.config({
        version: '1605019607598' //为了更新 js 缓存，可忽略
    });

    layui.use(['laypage', 'layer', 'table', 'element', 'slider','jquery','form','laydate','upload'], function(){
        var laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,$ = layui.jquery
            ,laydate= layui.laydate
            ,form=layui.form
            ,upload=layui.upload;
             $("#addGustForm").hide();
             $("#updGustForm").hide();




        //文件上传
        var uploadInst = upload.render({
            elem: '#tess' //绑定元素
            ,url: '${pageContext.request.contextPath}/upload' //上传接口
            ,done: function(res){
                //上传完毕回调\
                if(res.code==0){
                    alert($("#img").val(res.data));
                    alert(res.data)
                    $("#demo1").prop("src",res.data);
                }
            }
            ,error: function(){
                //请求异常回调
                alert(2)
            }
        });



        laydate.render({
            elem: '#test1'
        });

        laydate.render({
            elem: '#test2'
        });






        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                tips: 1
            });
        });


        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,url: '${pageContext.request.contextPath}/staff' //数据接口
            ,title: '用户表'
            ,height: 400
            ,page: true //开启分页
            ,limit:2
            ,limits:[2,5,10]
            ,request:{
                pageName:'page',
                limitName:'limit'
            }
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                 {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                ,{field: 'sname', title: '员工姓名'}
                ,{field: 'rzdate', title: '入职时间', sort: true}
                ,{field: 'address', title: '地址', sort: true}
                ,{field: 'status', title: '状态', sort: true , templet: function(res){
                        var d = res.status;
                        if (d==0){
                            return "正常";
                        }else {
                            return "禁用";
                        }
                        //return '<em>'+ res.status +'</em>'
                    }}
                //,{field: 'imgpath', title: '员工头像'}
                ,{field:'imgpath', title:'图片',  edit: 'text',templet:function (res) {
                        return '<img src="'+res.imgpath+'"/>'
                    }}
                ,{field: 'jname', title: '员工职位'}
                ,{field: 'dname', title: '员工部门'}
                ,{fixed: 'right', align:'center', toolbar: '#barDemo'}
            ]]
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    //添加一条数据
                    layer.open({
                        title:'添加角色'
                        ,type:1
                        ,area:['800px','500px']
                        ,offset:'50px'
                        ,content:$("#addGustForm")
                    });

                    //获取角色
                    $.ajax({
                        async:false,
                        url:"${pageContext.request.contextPath}/staff?method=juesexlk",
                        type:"post",
                        dataType:"JSON",
                        success:function (data) {
                            $.each(data,function (index,item) {
                                $("#juesesel").append("<option value='"+item.id+"'>"+item.jname+"</option>");
                            })
                            form.render("select");
                        },error:function () {
                            alert("错误");
                        }

                    });


                    //获取部门
                    $.ajax({
                        async:false,
                        url:"${pageContext.request.contextPath}/staff?method=bumenxlk",
                        type:"post",
                        dataType:"JSON",
                        success:function (data) {
                            $.each(data,function (index,item) {
                                $("#bumensel").append("<option value='"+item.id+"'>"+item.dname+"</option>");
                            })
                            form.render("select");
                        },error:function () {
                            alert("错误");
                        }

                    });


                    //提交按钮
                    form.on('submit(formDemo)', function(data){
                        //layer.msg(JSON.stringify(data.field));
                        //1.将获取到到的数据保存到数据库
                        $.ajax({
                            url:"${pageContext.request.contextPath}/staff?method=add",
                            data:data.field,
                            // data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                            type:"post",
                            async: true,
                            dataType:"JSON",
                            success:function(r){
                                if (r>0){
                                    layer.closeAll();
                                    //刷新一下table
                                    table.reload('test',{
                                        page:{
                                            curr:1
                                        }
                                    })
                                     //table.reload();
                                }


                            },error:function(){
                                alert("添加失败");
                            }

                        })
                        //刷新表单
                        return true;
                    });

                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构
                    window.location.href="${pageContext.request.contextPath}/staff?method=del&gid="+data.id;
                    layer.close(index);
                    //向服务端发送删除指令
                    // table.reload('test',{
                    //     page:{
                    //         curr:1
                    //     }
                    // })
                });

            } else if(layEvent === 'edit'){
                form.val("modify",data);


                //添加一条数据
                layer.open({
                    title:'添加角色'
                    ,type:1
                    ,area:['800px','500px']
                    ,offset:'50px'
                    ,content:$("#updGustForm")
                });

                //获取角色
                $.ajax({
                    async:false,
                    url:"${pageContext.request.contextPath}/staff?method=juesexlk",
                    type:"post",
                    dataType:"JSON",
                    success:function (data) {
                        $.each(data,function (index,item) {
                            $("#juesesel1").append("<option value='"+item.id+"'>"+item.jname+"</option>");
                        })
                        form.render("select");
                    },error:function () {
                        alert("错误");
                    }

                });


                //获取部门
                $.ajax({
                    async:false,
                    url:"${pageContext.request.contextPath}/staff?method=bumenxlk",
                    type:"post",
                    dataType:"JSON",
                    success:function (data) {
                        $.each(data,function (index,item) {
                            $("#bumensel1").append("<option value='"+item.id+"'>"+item.dname+"</option>");
                        })
                        form.render("select");
                    },error:function () {
                        alert("错误");
                    }

                })


                //提交按钮
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/staff?method=add",
                        data:data.field,
                        // data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",
                        async: true,
                        dataType:"JSON",
                        success:function(r){
                            alert(r);
                            if (r>0){
                                layer.closeAll();
                                //刷新一下table
                                table.reload('test',{
                                    page:{
                                        curr:1
                                    }
                                })
                                //table.reload();
                            }


                        },error:function(){
                            alert("添加失败");
                        }

                    })
                    //刷新表单
                    return false;
                });





            }


        });











        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });









    });




</script>





</body>
</html>
